<template>
  <div class="slot-children">
    <!-- 默认插槽，name属性值默认为default -->
    <slot>
      <span class="message">{{ message }}默认插槽</span>
      <span>父组件不提供插槽内容时渲染默认内容</span>
    </slot>
    <br>

    <!-- 具名插槽 -->
    <slot name="slot-name">
      <span class="message">{{ message }}具名插槽</span>
      <span>父组件不提供插槽内容时渲染默认内容</span>
    </slot>
    <br>

    <!-- 动态插槽名 -->
    <slot name="dynamic-slot-name">
      <span class="message">{{ message }}动态插槽名</span>
      <span>父组件不提供插槽内容时渲染默认内容</span>
    </slot>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'SlotUseChildren',
  data() {
    return {
      message: '子组件'
    };
  }
});
</script>

<style scoped>
.slot-children {
  width: 470px;
  background: pink;
}

.message {
  font-size: 20px;
  font-weight: bold;
  margin-right: 30px;
}
</style>